html,body,div{
    margin: 0;
    padding: 0;
    outline: 0;
}
.wrapper{
    position: relative;
    margin: 30px auto;
    width: 900px;
    height: 900px;
}

.block{
    position: absolute;
    width: 33.3%;
    height: 33.3%;
    z-index: 2;
}

.left-top{ left: 0; }
.center-top{ left: 33.3%; }
.right-top{ right: 0; }

.left-center{ left: 0; top: 33.3%; }
.right-center{ right: 0; top: 33.3%; }

.left-bottom{ left: 0; bottom: 0;}
.center-bottom{ left: 33.3%; bottom: 0;}
.right-bottom{ right: 0; bottom: 0;}

.main{
    position: absolute;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    perspective: 150;
    -webkit-perspective: 150;
}
.bg-img{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: .3s;
    background: url("asset/1.jpg") no-repeat center/cover;
}

.left-top:hover ~ .main > .bg-img{ transform: rotate3d(1,-1,0,1deg); }
.center-top:hover ~ .main > .bg-img{ transform: rotateX(1deg); }
.right-top:hover ~ .main > .bg-img{ transform:  rotate3d(1,1,0,1deg); }

.left-center:hover ~ .main > .bg-img{ transform: rotateY(-1deg); }
.right-center:hover ~ .main > .bg-img{ transform: rotateY(1deg); }

.left-bottom:hover ~ .main > .bg-img{ transform: rotate3d(-1,-1,0,1deg); }
.center-bottom:hover ~ .main > .bg-img{ transform: rotateX(-1deg); }
.right-bottom:hover ~ .main > .bg-img{ transform:  rotate3d(-1,1,0,1deg); }